import {PureComponent} from "react";
import {Link, Navigate, NavLink, Route, Routes} from "react-router-dom";
import Home from "./pages/home/Home";
import {Profile} from "./pages/Profile";
import {Login} from "./pages/Login";
import {NotFound} from "./pages/NotFound";
import {HomeRecommend} from "./pages/home/HomeRecommend";
import {HomeRanking} from "./pages/home/HomeRanking";
import {Category} from "./pages/Category";
import {Mall} from "./pages/Mall";
import HomeSong from "./pages/home/HomeSong";
import {WithRouter} from "./hoc";
import Detail from "./pages/Detail";
import User from "./pages/User";

class App extends PureComponent {
    render() {
        const {router: {navigate}} = this.props;
        return (
            <div className="app">
                <div className="header">
                    <span>header</span>
                    <div>
                        {/*NavLink相比Link多了对应页加active类名*/}
                        {/*<NavLink to='/home'>首页</NavLink>*/}
                        {/*<NavLink to='/profile'>档案</NavLink>*/}

                        {/*NavLink添加自定义类名和style的方法*/}
                        <NavLink to='/home' className={({isActive}) => isActive ? 'link-active' : ''}>首页</NavLink>
                        <NavLink to='/profile' style={({isActive}) => ({color: isActive ? 'red' : ''})}>档案</NavLink>
                        <NavLink to='/login'>登录</NavLink>
                        <button onClick={() => navigate('/category')}>分类</button>
                        <button onClick={() => navigate('/mall')}>商城</button>
                        <NavLink to="/user?name=zc&age=18">用户</NavLink>
                    </div>
                    <hr/>
                </div>
                <div className="content">
                    <Routes>
                        {/*这样写没有锚点符号*/}
                        {/*<Route path="/" element={<Home/>}/>*/}
                        <Route path="/" element={<Navigate to="/home"/>}/>
                        <Route path="/home" element={<Home/>}>
                            {/*子路由配置(嵌套路由)*/}
                            <Route path="/home" element={<Navigate to="/home/recommend"/>}/>
                            <Route path="/home/recommend" element={<HomeRecommend/>}/>
                            <Route path="/home/ranking" element={<HomeRanking/>}/>
                            <Route path="/home/song" element={<HomeSong/>}/>
                        </Route>
                        <Route path="/profile" element={<Profile/>}/>
                        <Route path='/login' element={<Login/>}/>
                        <Route path="/category" element={<Category/>}/>
                        <Route path="/mall" element={<Mall/>}/>
                        {/*路由传参写法*/}
                        <Route path="/detail/:id" element={<Detail/>}/>
                        <Route path="/user" element={<User/>}/>
                        {/*404页面写法*/}
                        <Route path='*' element={<NotFound/>}/>
                    </Routes>
                    <hr/>
                </div>
                <div className="footer">
                    <span>footer</span>
                    <hr/>
                </div>
            </div>
        )
    }
}

export default WithRouter(App)